<!--
 * @description  : 证件-证件文书列表
 * @descriptionDetail: 证件-证件文书列表
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-08-22 15:29:13
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
    </theme-navbar>
    <!-- #endif -->
    <view class="content official-content">
      <!-- 案件基本信息 -->
      <view class="base-info">
        <view class="mini-title gray1">
          企业(名称)字号
        </view>
        <view class="code-content">
          <view class="code-text">
            {{ baseInfo.companyName }}
          </view>
        </view>
        <view class="mini-title gray2">
          {{ $u.test.isEmpty(baseInfo.applyDate) ? "申请日期未录入" : baseInfo.applyDate }}
        </view>
        <view class="addr-lay">
          <view>
            {{ $u.test.isEmpty(baseInfo.businessAddrStreet) ? "经营地址地址未录入" : baseInfo.businessAddrStreet }}
          </view>
          <view>{{ $u.test.isEmpty(baseInfo.ecoType) ? "经济类型未录入" : baseInfo.ecoType }}</view>
        </view>
        <view class="addr-lay">
          <view>
            受理编号：{{ $u.test.isEmpty(baseInfo.applyCode) ? "未录入" : baseInfo.applyCode }}
          </view>
          <view>
            行政决定：{{ $u.test.isEmpty(baseInfo.handleResultCn) ? "未录入" : baseInfo.handleResultCn }}
          </view>
        </view>
        <view>
          受理日期：{{ $u.test.isEmpty(baseInfo.acceptFinishDate) ? "未录入" : baseInfo.acceptFinishDate }}
        </view>
        <view class="medium-title">
          办理业务类型
        </view>
        <view class="bottom-space">
          {{ $u.test.isEmpty(baseInfo.applyTypeName) ? "未录入" : baseInfo.applyTypeName }}
        </view>
        <u-line></u-line>
      </view>
      <!-- 案件进度信息 -->
      <view class="u-flex u-row-between official-stages">
        <view class="u-flex-1 u-flex" v-for="(it,index) in stagesList" :key="index">
          <view
            :class="{ itemFinished:it.handleStatus=='1102',itemDoing:it.handleStatus=='1103',itemNotBegin:it.handleStatus=='1104',stagesItem:true}"
          >
            {{ it.stageName }}
          </view>
        </view>
        <view class="stages-btn" v-show="isShowBtn">
          <u-button type="primary" @click="nextStageClick">
            下一步
          </u-button>
        </view>
      </view>
      <!-- 案件文书信息 -->
      <view class="official-info">
        <u-line></u-line>
        <view class="off-info-item" v-for="(item,index) in dataList" :key="index">
          <view class="off-info-title">
            <view class="title-text">
              {{ item.itemName }}
            </view>
            <view class="right-box">
              <u-icon
                name="plus-circle"
                color="#2979ff"
                label="添加"
                label-size="26"
                label-color="#2979ff"
                size="40"
                @click="addAdvance(item)"
              ></u-icon>
            </view>
          </view>
          <view v-for="(doc,i) in item.docList" :key="'doc'+i">
            <view class="off-info-content off-tb">
              <view @click="toDetailOfficial(item,doc)">
                <view class="off-tb">
                  <!-- 1201 已完成 -->
                  <u-icon
                    name="checkmark-circle-fill"
                    :label="doc.docName"
                    color="#19be6b"
                    size="40"
                    v-if="doc.handleStatus == '1201'"
                  ></u-icon>
                  <!-- 1202 进行中 -->
                  <u-icon
                    name="clock-fill"
                    :label="doc.docName"
                    color="#2979ff"
                    size="40"
                    v-if="doc.handleStatus == '1202'"
                  ></u-icon>
                  <!-- 1203 未开始状态-->
                  <u-icon
                    name="circleyuanquan"
                    custom-prefix="csbi-icon"
                    :label="doc.docName"
                    color="#f95e5a"
                    size="32"
                    v-if="doc.handleStatus == '1203'"
                  ></u-icon>
                  <!-- 1209 已退回状态-->
                  <u-icon
                    name="clock-fill"
                    :label="doc.docName"
                    color="#fa3534"
                    size="40"
                    v-if="doc.handleStatus == '1209'"
                  ></u-icon>
                  <u-icon
                    name="account-fill"
                    color="#929292"
                    size="36"
                    :label="doc.operator"
                    label-size="26"
                    v-if="doc.operator"
                  ></u-icon>
                </view>
                <view class="off-date">
                  {{ doc.docCodeTitle }}
                </view>
                <view class="off-date">
                  {{ doc.docStartTime }}
                </view>
                <view class="off-date" v-if="doc.isHaveFlow">
                  <view v-for="(flow,f) in doc.flows" :key="'flow'+f">
                    <text v-if="flow.isCurrent">
                      当前环节：<text style="color:#2979ff">
                        {{ flow.simpleName }}
                      </text>
                    </text>
                  </view>
                </view>
              </view>
              <!-- 附件上传 -->
              <view class="sub-img" v-show="doc.scan != 0" @click="submitImage(doc) ">
                <u-image
                  width="18px"
                  height="18px"
                  :src="doc.scan?'/static/case/image_green.png':'/static/case/image_gray.png'"
                  mode="widthFix"
                >
                </u-image>
                <span
                  :class="[doc.licItemDocDetails && doc.licItemDocDetails.liddIsAlreadyPic == '1' ? 'u-green' : 'u-gray']"
                >上传</span>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 文书 弹出层 -->
      <view class="">
        <u-action-sheet :list="sheetList" v-model="actionSheetShow" @click="sheetClick"></u-action-sheet>
      </view>
    </view>
  </view>
</template>

<script>
import {
  DOC_STATUS,
  CASE_DOC_NAME_PATH,
} from "@/service/certificate/certificate.info.js";
import certificateService from "@/service/certificate/certificate.service.js";
export default {
  data() {
    return {
      DOC_STATUS,
      CASE_DOC_NAME_PATH,
      actionSheetShow: false,
      prevParams: {}, // 列表页面传过来的参数
      caseReaultInfo: {}, // 点击添加按钮存放的数据
      baseInfo: {},
      sheetList: [], // 弹框数据
      selectList: [],
      dataList: [],
      itemsList: [], // 文书环节数据
      stagesList: [], // 文书阶段数据 
      isShowBtn:true,// 是否显示下一步按钮
      totalList:[],
      enterList:[],
    }
  },
  onLoad() {
    this.prevParams = this.getRouteParam();
    certificateService.getMainInfoById({
      handleMainUuid: this.prevParams.bizUuid,
      applyType: this.prevParams.applyType,
    }).then(res => {
      this.objMerge(this.baseInfo, res.bean);
    })
    this.initDocList();
  },
  methods: {
    // 获取文书列表数据
    initDocList() {
      this.$modal.showLoading('加载中');
      let self = this;
      certificateService.getStage({
        bizUuid: this.prevParams.bizUuid,
      }).then(res => {
        this.stagesList = res.data;
        if(this.stagesList[2].handleStatus !== '1104'){
          this.isShowBtn = false;
        }
      })
      certificateService.getItems({
        bizUuid: this.prevParams.bizUuid,
      }).then(res => {
        if (res.success) {
          this.itemsList = res.data;
          certificateService.getDocsByBizUuid({
            bizUuid: this.prevParams.bizUuid,
          }).then(res => {
            self.$modal.hideLoading();
            if (res) {
              this.enterList = res.data
              // 文书列表数据处理
              let [docList, stageDocs,] = [res.data, [],];
              // 过滤已删除的文书
              docList = docList.filter(item => item.handleStatus !== DOC_STATUS
                .DEL_DONE);
              docList.forEach((v, i) => {
                let docStage = stageDocs.filter(r => r.itemUuid === v
                  .itemUuid);
                if (!docStage || docStage.length == 0) {
                  let newV = {};
                  Object.assign(newV, v);
                  v.docList = [];
                  v.docList.push(newV);
                  stageDocs.push(v);
                } else {
                  docStage[0].docList.push(v);
                }
              });
              // 循环文书环节	 
              this.itemsList.forEach((item) => {
                let lst = stageDocs.filter(s => s.itemUuid === item
                  .itemUuid);
                if (lst.length == 0) {
                  stageDocs.push({
                    itemUuid: item.itemUuid,
                    itemName: item.itemName,
                    // titemUuid:item.titemUuid,
                    docList: [],
                  })
                }
              })
              // 文书环节排序
              let docArr = [];
              stageDocs.forEach((item) => {
                switch(item.itemName){
                case '审批表':docArr[0] = item; break;
                case '决定':docArr[1] = item; break;
                case '送达':docArr[2] = item; break;
                case '立卷':docArr[3] = item; break;
                } 
              })
              this.dataList = docArr;
            } else {
              self.$u.toast(res);
            }
          })
        }
      }).catch(err => {
        self.$modal.hideLoading();
        self.$u.toast(err);
      });
    },
    // 文书下一阶段点击事件
    nextStageClick() {
      let tstageUuid = '';
      this.stagesList.forEach(item => {
        if (item.handleStatus == '1103') {
          tstageUuid = item.tstageUuid;
        }
      })
      certificateService.handleNextStage({
        handleMainUuid: this.prevParams.bizUuid,
        tstageUuid: tstageUuid,
      }).then(res => {
        if (res.success) {
          this.initDocList();
          if(this.stagesList[2].handleStatus !== '1104'){
            this.isShowBtn = false;
          }
        } else {
          this.$u.toast(res.msg);
        }
      })
    },
    // 弹出选择sheet
    addAdvance(list) {
      this.caseReaultInfo = {};
      this.caseReaultInfo = list;
      certificateService.getDocumentConfigList({
        itemUuid: list.itemUuid,
      }).then(res => {
        if (!res || res.data.length == 0) {
          return false;
        }
        this.selectList = res.data;
        this.btnSheetHandler(list, res.data);
      });
    },
    // 按钮事件处理
    btnSheetHandler(stage, cfgs) {
      this.sheetList = [];
      let obj = {};
      this.sheetList = cfgs.map((cfg, idx) => {
        return{
          text:cfg.docName,
          docCode:cfg.docCode,
          docUuid:cfg.docUuid,
          titemUuid:stage.titemUuid,
        }
      });
      this.actionSheetShow = true;
    },
    // 弹层点击事件
    sheetClick(index) {
      let obj = this.sheetList[index];
      let len = this.caseReaultInfo.docList.length != 0 && this.caseReaultInfo.docList.filter(r => r
        .docCode === obj.docCode).length;
      certificateService.canAddDoc({
        bizUuid: this.prevParams.bizUuid,
        docUuid: obj.docUuid,
      }).then(res => {
        if (res.success) {
          this.getToParams(obj);
        } else {
          this.$u.toast(res.msg);
        }
      })

    },
    // 获取跳转路径需要的参数
    getToParams(obj, flag) {
      this.setRouteParam({
        bizUuid: this.prevParams.bizUuid,
        docUuid: obj.docUuid,
        docInsUuid: obj.docInsUuid,
        id: flag ? obj.docInsUuid : '',
        type: obj.isFinish ? 'view' : 'add',
        titemUuid: this.caseReaultInfo.titemUuid ? this.caseReaultInfo.titemUuid : obj.titemUuid,
        applyType: this.prevParams.applyType,
      });
      this.$u.route(this.CASE_DOC_NAME_PATH[obj.docCode].url);
    },
    // 列表点击事件
    toDetailOfficial(stage, doc) {
      let isTrue = true;
      if(doc.docCode == 'lic-new-05-01-01' || doc.docCode == 'lic-new-05-01-03'){
        let arr = this.dataList[3].docList.filter((item) => {
          return item.docCode == 'lic-new-05-01-02';
        })
        if(doc.docCode == 'lic-new-05-01-03'){
          arr = this.dataList[3].docList.filter((item) => {
            return item.docCode == 'lic-new-05-01-01' || item.docCode == 'lic-new-05-01-02';
          }) 
        }
        arr.forEach((item) => {
          if(!item.isFinish){
            this.$u.toast(`请先完成${item.docName}`) 
            isTrue = false
          }
        })
      }
      if(!isTrue) return;
      this.totalList = stage.docList
      this.caseReaultInfo = stage;
      this.getToParams(doc, 'detail');
    },
    // 文书添加返回操作
    updateBackState(param) {
      let self = this
      let dossierList = self.enterList.filter(item => {
        return item.docCode == "lic-new-05-01-01"
      })
      let directoryList = self.enterList.filter(item => {
        return item.docCode == "lic-new-05-01-02"
      })
      let examList = self.enterList.filter(item => {
        return item.docCode == "lic-new-05-01-03"
      })
      if (param.athLicensDirectory) {
        this.initDocList();
        if(dossierList[0].handleStatus != '1201' ){
          self.getToParams(dossierList[0], 'detail');
        } 
        else if(examList[0].handleStatus != '1201'){
          self.getToParams(examList[0], 'detail');
        }
      }else if(param.licDossierRefresh ){
        this.initDocList();
        if(directoryList[0].handleStatus != '1201' ){
          self.getToParams(directoryList[0], 'detail' );
        } 
        else if(examList[0].handleStatus != '1201'){
          self.getToParams(examList[0], 'detail');
        }
        console.log( param.licDossierRefresh )
      }else if( param.examPreRefresh ){
        this.nextStageClick()
        this.initDocList();
        console.log(param.examPreRefresh)
      }else{
        this.initDocList();  
      }
    },
    // 文书图片上传
    submitImage(doc) {
      if (doc.scan) {
        this.setRouteParam({
          liddId: doc.docInsUuid,
        });
        this.$u.route('pages/case/official/officialListUploadImage');
      }
    },
  },
}
</script>
<style lang="scss" scoped>
    .official-stages {
        margin: 10rpx 0rpx;

        .stages-line {
            flex: 1;
            height: 2rpx;
            background-color: #F2F2F2;
        }

        .stagesItem {
            width: 80rpx;
            height: 80rpx;
            border-radius: 40rpx;
            line-height: 80rpx;
            text-align: center;
        }

        .itemFinished {
            border: 1rpx solid #16D778;
            color: #16D778;
            box-shadow: 0px 0px 6px rgba(22, 215, 120, 40%);
        }

        .itemDoing {
            border: 1rpx solid #1084FF;
            color: #1084FF;
            box-shadow: 0px 0px 6px rgba(42, 131, 255, 40%);
        }

        .itemNotBegin {
            border: 1rpx solid #BCBCBC;
            color: #BCBCBC;
            box-shadow: 0px 0px 6px #e5e5e5;
        }

        .stages-btn {
            width: 100rpx;
        }
    }

    .official-content {
        margin: 16px 15px;

        .base-info {
            font-size: $font_size_4;
            color: #666;

            .mini-title {
                font-size: $font_size_6;

                &.gray1 {
                    color: #C7C7CC;
                }

                &.gray2 {
                    color: #929292;
                }
            }

            .code-content {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;

                .code-text {
                    color: #222;
                    font-size: $font_size_1;
                    font-weight: bold;
                }

                .btn-lay {
                    margin: 0px 0px;
                }

                .btn-lay::after {
                    border: none;
                }
            }

            .addr-lay {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: top;
                margin: 16rpx 0rpx;

                view {
                    padding: 10rpx 15rpx;
                    font-size: $font_size_6;
                    background-color: #f2f2f2;
                    margin-right: 10rpx;
                    border-radius: 8rpx;
                }
            }

            .medium-title {
                font-size: $font_size_2;
                margin: 20px 0px 8px;
                font-weight: bold;
                color: #222;
            }

            .bottom-space {
                margin-bottom: 20px;
            }
        }

        .official-info {
            .off-info-item {
                margin: 20px 0px 8px;

                .off-info-title {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: flex-start;
                    font-size: $font_size_6;
                    color: #2979ff;

                    .title-text {
                        color: #222;
                        font-size: $font_size_2;
                        font-weight: bold;
                    }
                }

                .off-info-content {
                    padding: 20px 0px;
                    border-bottom: 1px solid #e4e7ed;

                    .off-title {
                        display: inline-block;
                        padding: 0px 5px;
                    }

                    .off-date {
                        padding: 8px 0px 0px 24px;
                        color: #929292;
                    }

                }
            }
        }
    }

    .off-tb {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .sub-img {
        display: flex;
        align-items: center;
        font-size: 12px;

        .u-green {
            height: 18px;
            line-height: 18px;
            color: #41C087;
            padding-left: 5px;
        }

        .u-gray {
            height: 18px;
            line-height: 18px;
            color: gray;
            padding-left: 5px;
        }
    }
</style>
